<template>
  <div class="menu">
    <!-- v-hasPermi="['system:menu:add']" 后期做按钮权限会用到 -->
    <el-button size="mini" type="primary" @click="handleAdd" class="btn">添加菜单</el-button>
    <!-- 表格部分 -->
    <zj-table
      v-loading="loading"
      :columns="columns"
      :data="data"
      :total="total"
      :sequence="sequence"
      :selectable="selectable"
      :pagination="false"
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      height="auto"
    />
    <!-- 弹窗部分 -->
    <el-dialog
    v-el-drag-dialog
    width="30%"
    :visible.sync="dialogVisible"
    title="添加菜单"
    center>
    <!-- form表单 -->
    <el-form :module="form" label-width="80px">
      <el-form-item label="上级菜单">
          <treeselect
            v-model="form.parentId"
            :options="menuOptions"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="选择上级菜单"
          />
      </el-form-item>
      <el-form-item label="菜单图标 :">
            <el-popover
              placement="bottom-start"
              width="460"
              trigger="click"
              @show="$refs['iconSelect'].reset()"
            >
              <IconSelect ref="iconSelect" @selected="selected" />
              <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
                <svg-icon
                  v-if="form.icon"
                  slot="prefix"
                  :icon-class="form.icon"
                  class="el-input__icon"
                  style="height: 32px;width: 16px;"
                />
                <i v-else slot="prefix" class="el-icon-search el-input__icon" />
              </el-input>
            </el-popover>
          </el-form-item>
          <el-form-item label="菜单名称 : ">
            <el-input v-model="form.title" placeholder="请输入菜单名称"></el-input>
          </el-form-item>
          <el-form-item label="路由标识 : ">
            <el-input v-model="form.name" placeholder="请输入路由标识"></el-input>
          </el-form-item>
          <el-form-item label="路由地址 : ">
            <el-input v-model="form.path" placeholder="请输入路由地址"></el-input>
          </el-form-item>
          <el-form-item label="权限标识 :">
            <el-input v-model="form.menu" placeholder="请输入权限标识"></el-input>
          </el-form-item>
    </el-form>
    <!-- 底部按钮 -->
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  //引入组件并注册
import IconSelect from '@/components/IconSelect'
import SvgIcon from '@/components/SvgIcon'
// 下拉列表引入并注册
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components:{
    IconSelect,
    SvgIcon,
    Treeselect
  },
  data(){
    return {
      dialogVisible: false,
      loading: false,
      total: 0,
      // 是否显示多选框
      selectable: false,
      // 是否显示序号列
      sequence: false,
      columns: Object.freeze([
        {
          label: '菜单名称',
          prop: 'title',
          align: 'left'
        },
        {
          label: '排序',
          prop: 'orderNum',
          width: 100,
          align: 'left'
        },
        {
          label: '路由标识',
          prop: 'name',
          align: 'left'
        },
        {
          label: '路由地址',
          prop: 'path',
          align: 'left'
        },
        {
          label: 'App模块名称',
          prop: 'mobileName',
          align: 'left'
        },
        {
          label: 'App模块标识',
          prop: 'mobileCode',
          align: 'left'
        },
        {
          label: '权限标识',
          prop: 'perms',
          align: 'left'
        },
        // 行编辑按钮，在表格末尾出现，自动锁定右侧
        {
          width: 200,
          label: '操作',
          actions: [
            {
              id: 'add',
              text: '新增',
              type: 'primary',
              click: this.addItem
              // before: () => this.hasPermi('system:menu:add'),  //添加权限管理时会用到
            },
            {
              id: 'update',
              text: '编辑',
              type: 'primary',
              click: this.update
            },
            {
              id: 'delete',
              text: '删除',
              type: 'danger',
              click: this.delete
            }
          ]
        }
      ]),
      data: [
        {
          children: [
            {
              component: null,
              icon: "#",
              id: "8083299949227311104",
              label: "账号管理",
              menuType: "C",
              mobileCode: "Account",
              mobileName: "账号管理",
              name: "Account",
              orderNum: 1,
              parentId: "8083282611639787520",
              path: "account",
              perms: "",
              title: "账号管理",
              userList: null
            },
            {
              component: null,
              icon: "#",
              id: "8083300204920471552",
              label: "角色管理",
              menuType: "C",
              mobileCode: "Role",
              mobileName: "角色管理",
              name: "Role",
              orderNum: 2,
              parentId: "8083282611639787520",
              path: "role",
              perms: "",
              title: "角色管理",
              userList: null
            },
            {
              component: null,
              icon: "#",
              id: "8083300264928378880",
              label: "菜单管理",
              menuType: "C",
              mobileCode: "Menu",
              mobileName: "菜单管理",
              name: "Menu",
              orderNum: 3,
              parentId: "8083282611639787520",
              path: "menu",
              perms: "",
              title: "菜单管理",
              userList: null
            }
          ],
          component: null,
          icon: "system",
          id: "8083282611639787520",
          label: "后台管理",
          menuType: "M",
          mobileCode: "System",
          mobileName: "后台管理",
          name: "System",
          orderNum: 9,
          parentId: "0",
          path: "system",
          perms: "",
          title: "后台管理",
          userList: null
        }
      ],
      form: {
        icon: '',
        name: '',
        //为0则表示顶级菜单
        parent: 0
      },
      // 菜单树选项
      menuOptions: []
    }
  },
  methods: {
    handleAdd(){
      this.dialogVisible = true;
      this.tableList()
    },
     // 选择图标,并父传子
    selected(name) {
      this.form.icon = name
    },
    // //列表首次渲染
    // async tableList(){
    //   // 调用接口获取数据
    //   const res = await getResources()
    //   //将获取到的数据,赋值给准备好的储存数组
    //   this.tableData = res.list   //渲染表格
    //   //渲染下拉列表
    //   const menu = {
    //       id: 0,
    //       name: '主类目',
    //       children: [
    //         ...res.list
    //       ]
    //     }
    //     this.menuOptions = [menu]
    // },
    tableList(){
      const menu = {
          id: 0,
          title: '主类目',
          children: this.data
        }
        this.menuOptions = [menu]
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.title,
        children: node.children
      }
    },
    // 新增
    addItem(){
      this.$message({
        type: 'warning',
        message: '该功能尚未开发'
      })
    },
    // 编辑
    update(){
      this.$message({
        type: 'warning',
        message: '该功能尚未开发'
      })
    },
    // 删除
    delete(){
      this.$message({
        type: 'warning',
        message: '该功能尚未开发'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.menu{
  .btn{
    margin-bottom: 20px;
  }
}
</style>